import React, {} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  ScrollView,
  ListView
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import HeartConstants from '../../common/HeartConstants';
import ImageConstants from '../../common/ImageConstants';
import Config from '../../config';
import TImage from '../../components/TImage';
import HeartLoveCommonDataEditPage from './HeartLoveCommonDataEditPage';
import HeartLoveRquestOtherDataAction from '../../actions/heart/HeartLoveRquestOtherDataAction';
import HeartLoveSendLikeUserAction from '../../actions/heart/HeartLoveSendLikeUserAction';
import CommonShowImageFullScreenAction from '../../actions/common/CommonShowImageFullScreenAction';
import CommonShowVideoAction from '../../actions/common/CommonShowVideoAction';
import CommonAvatarView from '../common/CommonAvatarView';
import TVideoComponent from '../../components/TVideoComponent';
import _ from 'lodash';

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class HeartLoveOtherDataPage extends HeartLoveCommonDataEditPage  {
  constructor(props) {
    super(props);

    this._backgroudColor = "#00000000";
    this._showNeedMark = false;
    this.state.isResponeUpdate = false;
    this.state.loveData = this.props.pageData.routeData.loveData;
    this.state.is_liked = false;
    this.state.likeSuccess = false;

    this._doLike = false;
  }

  _dealEnterPage() {
    super._dealEnterPage();
    this.state.loveData = this.props.pageData.routeData.loveData;
    this._doLike = false;
    this._requestData();
  }

  componentDidMount() {
    this._requestData();
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate === true) {
      nextState.isResponeUpdate = false;
      for (var loveKey in nextState.loveData) {
        constantsData = HeartConstants.allDataForeach[loveKey];
        if(constantsData != undefined && constantsData.type == "picker") {
          nextState.loveData[loveKey] = constantsData.params[nextState.loveData[loveKey] - 1];
        }
      }
      if(this._doLike) {
        let likeText = nextState.is_liked === true ? "已点赞" : "已取消点赞";
        ToastUtils.show(likeText);
        this._doLike = false;
      }
    }
    if(nextState.likeSuccess === true) {
      nextState.likeSuccess = false;
      this._doLike = true;
      this._requestData();
    }
  }

  _requestData() {
    new HeartLoveRquestOtherDataAction().call(this, this.state.loveData);
  }

  _getPageDatas() {
    return HeartConstants.bigTypeDatas;
  }

  render() {
    return(
      <View style={{flex:1,
            backgroundColor:this._backgroudColor,}}>
        <ScrollView style={{
            flex:1,
            // paddingTop:Config.paddingTop,
            height:SizeUtils.getWindowSize().height}}>
          {this._renderHeader()}
          {this._renderListHeader('自我介绍',false)}
          {this._renderSelfIntro()}
          {this._renderListHeader('照片和视频',false)}
          {this._renderPhotoList()}
          {this._renderVoideList()}
          {this._renderListHeader('基础资料',false)}
          {this._renderDataCellView('manbasicInformationDatas1')}
          {this._renderListHeader('择偶条件',false)}
          {this._renderDataCellView('mateConditionsDatas')}
          {this._renderNavigationBar()}
        </ScrollView>
        {this._renderSubmitButtons()}
      </View>
    )
  }

  _renderHeader() {
    return(
      <View style={{
        width:SizeUtils.getWindowSize().width,
        backgroundColor:'#f9605a',
        paddingTop:SizeUtils.translateDesignHeightToCode(120),
        paddingBottom:SizeUtils.translateDesignHeightToCode(50),
      }}>
        <View style={{flexDirection:'row',}}>
          {this._renderContentItemImage()}
          {this._renderContentItemRight()}
        </View>
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(30),alignItems: 'center',justifyContent: 'center',}}>
            <TouchableOpacity style={{
                height:SizeUtils.translateDesignHeightToCode(40),
                borderRadius:SizeUtils.translateDesignNumToCode(40),
                borderColor:'#fff',
                backgroundColor:'transparent',
                borderWidth:SizeUtils.translateDesignNumToCode(3),
                alignItems: 'center',justifyContent: 'center',
              }}
              onPress={()=>{this._onPressPageButton({key: "contactData", name: "联系方式", page: "heart_love_contactData"})}}>
              <Text style={{color:"#fff",
                fontSize:SizeUtils.translateFontSizeToCode(24),
                textAlign:"center", marginTop:SizeUtils.translateDesignHeightToCode(3), marginBottom:SizeUtils.translateDesignHeightToCode(3),
                marginLeft:SizeUtils.translateDesignWidthToCode(8), marginRight:SizeUtils.translateDesignWidthToCode(8)}}>
                {'查看联系方式'}
              </Text>
            </TouchableOpacity>
        </View>
      </View>
    )
  }
  _renderSelfIntro(){
    return(
      <View style={{
        minHeight:SizeUtils.translateDesignHeightToCode(200),
        paddingTop:SizeUtils.translateDesignHeightToCode(20),
        borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
        paddingLeft:SizeUtils.translateDesignWidthToCode(30),
        paddingRight:SizeUtils.translateDesignWidthToCode(20),}}>
        <Text style={{lineHeight:16,color:"#999999",fontSize:SizeUtils.translateFontSizeToCode(24),}}>{this.state.loveData.self_intro}</Text>
      </View>);
  }
  _renderPhotoList(){
    return(
      <ListView 
        horizontal={true}
        removeClippedSubviews={false}
        enableEmptySections={true}
        showsHorizontalScrollIndicator={false}
        style={{
          flex:1,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          height:SizeUtils.translateDesignHeightToCode(350)}}
        dataSource={ds.cloneWithRows(this.state.loveData.image_urls||[])}
        renderRow={this._photoRow.bind(this)}
      />
    );
  }
  _renderVoideList(){
    return(
      <ListView 
        horizontal={true}
        enableEmptySections={true}
        removeClippedSubviews={false}
        showsHorizontalScrollIndicator={false}
        style={{
          flex:1,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          height:SizeUtils.translateDesignHeightToCode(350)}}
        dataSource={ds.cloneWithRows(this.state.loveData.video_urls||[])}
        renderRow={this._videoRow.bind(this)}
      />
    );
  }

  _pressVoid(uri){
    new CommonShowVideoAction().call(this, {style:{
          width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(420)},
          videoUrl:uri,
          showClose:false,
          canFullScreen:true,}
    );
  }
  _videoRow(rowData){
    const imgSource = `${rowData}?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300,m_fast`
    return(
      <TouchableOpacity  onPress={() => this._pressVoid(rowData) }>
          <View style={{overflow:'hidden',padding:SizeUtils.translateDesignHeightToCode(20),}}>
                <TImage source={{uri:imgSource}} style={{width:300,height:300}} resizeMode = {"cover"}/>
          </View>
      </TouchableOpacity>
    );
  }
  _photoRow(rowData){
    return(
      <TouchableOpacity  onPress={() => this._pressImg(rowData) }>
          <View style={{overflow:'hidden',padding:SizeUtils.translateDesignHeightToCode(20),}}>
                <TImage source={{uri:rowData}} style={{width:300,height:300}} resizeMode = {"cover"}/>
          </View>
      </TouchableOpacity>
    );
  }
  _renderBaseCellView(){
    let loveData=this.state.loveData;
    var d=new Date()
    var t = new Date(loveData.birth_day)
    return(
      <View style={{
          flexDirection:"row",
          flexWrap: 'wrap',
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          paddingTop:SizeUtils.translateDesignHeightToCode(20),
          paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          paddingLeft:SizeUtils.translateDesignWidthToCode(40)}}>
         {loveData.birth_year!=undefined?this._renderContentItemTagPerView(loveData.birth_year>0?(d.getUTCFullYear()-parseInt(loveData.birth_year))+'岁':(d.getUTCFullYear()-t.getUTCFullYear)+'岁','#fd9bcc','#fff8fc'):null}
         {this._renderContentItemTagPerView(loveData.height,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('体重:'+loveData.weight,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('学历:'+loveData.education,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('月收入:'+loveData.income,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('毕业学校:'+loveData.educated_from,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('工作单位:'+loveData.department,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('工作状态:'+loveData.job_status,'#fd9bcc','#fff8fc')}
         {this._renderContentItemTagPerView('单位地址:'+loveData.address,'#fd9bcc','#fff8fc')}
      </View>
    )
  }
  _renderDataCellView(key){
    let loveData=this.state.loveData;
    let dataDic=HeartConstants[key];
    let themeColor='#5e68e8';
    let themeTagColor='#f2f3ff';
    if (key=='familyData') {
      themeColor='#ff7d00';
      themeTagColor='#fff0dc';
    }
    if (key=='lovePlanData') {
      themeColor='#3b4052';
      themeTagColor='#f2f2f2';
    }
    let arr=_.keys(dataDic)
    return(
      <View style={{
          flexDirection:"row",
          flexWrap: 'wrap',
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          paddingTop:SizeUtils.translateDesignHeightToCode(20),
          paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          paddingLeft:SizeUtils.translateDesignWidthToCode(40)}}>
         {arr.map((tag,index)=>{
            let string=loveData[tag];
            if (string==undefined||string.length<1) {
              return;
            }
            if (string!==undefined) {
              if (tag==='post_property'||tag==='post_type'||tag==='man_body') {
                string= dataDic[tag].name+':'+dataDic[tag].params[string];
              }else{
                string= dataDic[tag].name+':'+string;
              }
            }
            return this._renderContentItemTagPerView(string,themeColor,themeTagColor,tag,)
         })}
      </View>
    )
  }
  _renderContentItemImage() {
    return(
      <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(40)}}>
         <CommonAvatarView avatarUri={this._getAvarta()} size={120}/>
      </View>
    )
  }
  _renderContentItemRight() {
    return(
      <View style={{flex:1, flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(25)}}>
        {this._renderContentItemName()}
        {this._renderContentItemAD()}
        {this._renderContentItemTags(this.state.loveData)}
      </View>
    )
  }
  //标签
  _renderContentItemTags(data) {
    return(
      <View style={{flexDirection:"row",
        paddingTop:SizeUtils.translateDesignHeightToCode(10),
        paddingBottom:SizeUtils.translateDesignHeightToCode(10),
        flexWrap: 'wrap',
        }}>
        {data.tags_list && data.tags_list.map(
          (tag, index) => {return this._renderContentItemTagPer(tag, index)}
        )}
      </View>

    )
  }
  _renderContentItemTagPer(tag, index) {
    return (
      <View key={index} style={{backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(30),
          height:SizeUtils.translateDesignHeightToCode(30),marginRight:SizeUtils.translateDesignWidthToCode(10),
          flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <Text style={{color:"#f9605a",fontSize:SizeUtils.translateFontSizeToCode(20),
         textAlign:"center", marginTop:SizeUtils.translateDesignHeightToCode(3), marginBottom:SizeUtils.translateDesignHeightToCode(3),
          marginLeft:SizeUtils.translateDesignWidthToCode(8), marginRight:SizeUtils.translateDesignWidthToCode(8)}}>
         {this._getTagText(tag)}
       </Text>
      </View>
    )
  }
  //标签
  _renderContentItemTagPerView(tag,themeColor,themeTagColor,index) {
    if (!tag) {return null }
    return (
      <View key={index} style={{backgroundColor:themeTagColor, borderRadius:SizeUtils.translateDesignNumToCode(40),
      height:SizeUtils.translateDesignHeightToCode(40),
         marginTop:SizeUtils.translateDesignHeightToCode(5),
         marginBottom:SizeUtils.translateDesignHeightToCode(5),
         marginRight:SizeUtils.translateDesignWidthToCode(10),
          flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <Text style={{color:themeColor, fontSize:SizeUtils.translateFontSizeToCode(20),
         textAlign:"center",
          marginLeft:SizeUtils.translateDesignWidthToCode(12), marginRight:SizeUtils.translateDesignWidthToCode(12)}}>
         {tag}
       </Text>
      </View>
    )
  }
  _getTagText(tag) {
    return HeartConstants.totalData.tags_list.params[tag - 1];
  }
  _renderContentItemAD(){
    return(
      <View style={{flexDirection:"row",}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#fff"}}
          numberOfLines={1} >{this.state.loveData.gender== 1?'男':'女'+" | "+this.state.loveData.height+" 厘米 | "+ this.state.loveData.department}</Text>
      </View>
    )
  }
  _getAvarta() {
    if(this.state.loveData && this.state.loveData.image_urls && this.state.loveData.image_urls.length > 0) {
      return {uri: this.state.loveData.image_urls[0]}
    }
    else {
      return ImageConstants.common_default_head2;
    }
  }
    //名字
  _renderContentItemName() {
    return(
      <View style={{flexDirection:'row',alignItems: 'center', marginTop:SizeUtils.translateDesignHeightToCode(10),marginBottom:SizeUtils.translateDesignHeightToCode(10)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#fff"}}>{this._getName()}</Text>
        {this._renderContentItemAge()}
      </View>
    )
  }
  _getName() {
    return this.state.loveData.by_name;
  }
   //年龄
  _renderContentItemAge() {
    var d=new Date()
    var t = new Date(this.state.loveData.birth_day)
    return (
      <View style={{backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(30),
          height:SizeUtils.translateDesignHeightToCode(30),marginLeft:SizeUtils.translateDesignWidthToCode(10),
          flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <Text style={{color:"#f9605a",fontSize:SizeUtils.translateFontSizeToCode(20),
         textAlign:"center", marginTop:SizeUtils.translateDesignHeightToCode(3), marginBottom:SizeUtils.translateDesignHeightToCode(3),
          marginLeft:SizeUtils.translateDesignWidthToCode(8), marginRight:SizeUtils.translateDesignWidthToCode(8)}}>
         {this.state.loveData.birth_year>0?((d.getUTCFullYear()-parseInt(this.state.loveData.birth_year))+'岁'):((d.getUTCFullYear()-t.getUTCFullYear())+'岁')}
       </Text>
      </View>
    )
  }
  _renderListHeader(name,hasMore,key) {
    return (
      <View style={{flexDirection:"row", paddingLeft:SizeUtils.translateDesignWidthToCode(30),
          paddingRight:SizeUtils.translateDesignWidthToCode(20),
          backgroundColor:'#fff',
          width:SizeUtils.getWindowSize().width,
          paddingBottom:SizeUtils.translateDesignHeightToCode(22), justifyContent:"space-between",
          paddingTop:SizeUtils.translateDesignHeightToCode(22), alignItems:"center",
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",}}>
        <View style={{flexDirection:"row", alignItems:"center",}}>
          <TImage source={require("../../../resource/images/home/biaotitle.png")} style={{width:8, height:30}}/>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            marginLeft:SizeUtils.translateDesignWidthToCode(8), borderWidth:0,
            backgroundColor:"#00000000",
            fontWeight:"bold"}} >
            {name}
          </Text>
        </View>
        {
          hasMore?
          <TouchableOpacity  onPress={()=>{this._onPressMore(key)}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999",}}>
              {'更多 >'}
            </Text>
          </TouchableOpacity>:null
        }
        
      </View>
    )
  }
  _onPressMore(key){

  }
  _pressImg(image_url){
  new CommonShowImageFullScreenAction().call(this, {source:image_url, isNeedSave:false});
}


 _renderSubmitButtons() {
     return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.translateDesignHeightToCode(100),
          flexDirection:"row", justifyContent:"center", alignItems:"center", borderWidth:SizeUtils.translateDesignNumToCode(3),
          borderColor:"#eeeeee"}}>
        {this._renderLikeButton()}
        <View style={{width:SizeUtils.translateDesignWidthToCode(3),backgroundColor:"#92949b",height:SizeUtils.translateDesignHeightToCode(50) }}></View>
        {this._renderMessageButton()}
      </View>
    )
  }

  _renderLikeButton() {
   return(
      <TouchableOpacity onPress={()=>this._onPressLikeBtn()} style={{width:SizeUtils.translateDesignWidthToCode(370),
          height:SizeUtils.translateDesignHeightToCode(80), flexDirection:"column", justifyContent:"center", alignItems:"center",
          }}>
        <View style={{flexDirection:"row",height:SizeUtils.translateDesignHeightToCode(76), justifyContent:"center", alignItems:"center",}}>
          <TImage source={this._getHeartImage()}
            style={{width:38,height:34}}/>
          <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(10), fontSize:SizeUtils.translateFontSizeToCode(28), color:this.state.is_liked === true?"#ee3535":"#999999"}}>
             {this.state.is_liked === true?"已赞":"点个赞"}
          </Text>
        </View>

      </TouchableOpacity>
    )
  }

  _renderMessageButton() {
    return(
      <TouchableOpacity onPress={()=>this._onPressMsgBtn()} style={{width:SizeUtils.translateDesignWidthToCode(372),
          height:SizeUtils.translateDesignHeightToCode(80), flexDirection:"column", justifyContent:"center", alignItems:"center",
          }}>
        <View style={{flexDirection:"row",height:SizeUtils.translateDesignHeightToCode(76), justifyContent:"center", alignItems:"center",}}>
          <TImage source={require("../../../resource/images/heart/icon_message_white.png")}
            style={{width:34,height:34}}/>
          <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(10),fontSize:SizeUtils.translateFontSizeToCode(28), color:"#92949b"}}>
            发消息
          </Text>
        </View>

      </TouchableOpacity>
    )
  }

  _onPressMsgBtn(){
    if(!this.props.pageData.routeData.myLoveData || this.props.pageData.routeData.myLoveData.state != 1){
      ToastUtils.show("你不是相亲者，不能发送消息");
      return;
    }

    if(this.props.pageData.routeData.myLoveData && this.props.pageData.routeData.myLoveData.lover_id == this.state.loveData.lover_id){
      ToastUtils.show("不能给自己发送消息");
      return;
    }

   this.state.loveData.msguser_id = this.state.loveData.lover_id;
   this.state.loveData.type = 1;
    this.gotoPage(Config.pages.heart_love_chat, this.state.loveData);
  }

  _renderPageButton(data, index) {
    // if(data.key == "tags_list") {
//
    // }
    // else
    // {
      return(
        <TouchableOpacity key={index} style={{flexDirection:"row", alignItems:"center", justifyContent:"space-between",
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
            paddingLeft:SizeUtils.translateDesignHeightToCode(40),
            paddingRight:SizeUtils.translateDesignHeightToCode(40),
            paddingTop:SizeUtils.translateDesignHeightToCode(26),
            paddingBottom:SizeUtils.translateDesignHeightToCode(26)}}
          onPress={() => this._onPressPageButton(data)}>
          <View style={{flexDirection:"row", alignItems:"center"}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32),
              color:"#333333"}}>{this._getPageButtonName(data)}</Text>
          </View>
          <View style={{flex:1, paddingLeft:SizeUtils.translateDesignWidthToCode(80), flexDirection:"row", alignItems:"center",
              justifyContent:"flex-end"}}>
            <Text numberOfLines={1} style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333"}}>{this._getPageButtonValue(data)}</Text>
            <Text numberOfLines={1} style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#333333"}}>{" >"}</Text>
          </View>
        </TouchableOpacity>
      )
    // }
  }

  _getPageButtonValue(data) {
    if(data.key === "tags_list") {
      return "";
    }
    return this._pageButtonValues[data.key];
  }

  _onPressPageButton(data) {
    let pageButtonDatas = HeartConstants.totalData[data.key];
    if(data.key == "self_intro") {
      this.gotoPage(Config.pages.common_input, {title:pageButtonDatas.name, length:pageButtonDatas.params.length,
        editable:false,
        default:this.state.loveData[pageButtonDatas.key] === null ? "" : this.state.loveData[pageButtonDatas.key],
        type:pageButtonDatas.type,
        callback:(value) => {this._editCallback(pageButtonDatas, value)}});
    }
    else if(data.key === "tags_list") {
      this.gotoPage(Config.pages.heart_love_tag, {loveData:this.state.loveData, others:true});
    }
    else {
      this.gotoPage(Config.pages[data.page], {loveData:this.state.loveData,
        pageButtonDatas:pageButtonDatas, showNeedMark:false, editable:false});
    }
  }



  _renderNavigationBarLeftButtonContent() {
    var child = null;
    child = (<View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(51),
          alignItems:"center"}}>
        <Image source={require("../../../resource/images/common/Back-icon2.png")}
            style={{width:SizeUtils.translateDesignWidthToCode(24),
              height:SizeUtils.translateDesignWidthToCode(41)}}/>
      </View>)
    return child;
  }


  _getHeartImage() {
    if(this.state.is_liked === true) {
      return require("../../../resource/images/heart/icon_zan_white.png");
    }
    return require("../../../resource/images/heart/icon_zan_gray.png");
  }

  _onPressLikeBtn() {
    new HeartLoveSendLikeUserAction().call(this, this.state.loveData);
  }
};
